{% extends "ad_template_base.html" %}
{% load staticfiles %}

{% block style %}
    <style>
        .tp1-wrapper {
            width: 100%;
            height: 100%;
        }
        table {
            height: 100%;
        }
        .tp1-img {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .tp1-img-center {
            width: 100%;
            border: 3px white solid;
        }
        .tp1-button-wrapper {
            margin: auto;
            position: absolute;
            top: 55%;
            left: 30%;
            bottom: 0;
            right: 30%;
            text-align: center;
            border-radius: 0px;
            width: 40%;
            height: 10%;
        }
        .tp1-down-button {
            margin-top: 0.625rem;
            background-color: rgba(215, 40, 40, 0.9);
            color: white;
            border: 1px solid #ffffff;
            border-radius: 5px;
            padding: 0.4rem 2rem;
            font-size: 1.4rem;
        }
        .tp1-top-text {
            text-align: left;
        }
        .tp1-top-text-title {
            font-size: 2.5rem;
            margin-bottom: 0;
            margin-top: 0;
            font-weight: bold;
            padding-bottom: 5px;
            border-bottom: 1px solid;
        }
        .tp1-top-text-content {
            margin: 1rem 0;
            font-size: 1.5rem;
        }

        @media only screen and (max-height: 600px) {
            .tp1-top-text-title {
                font-size: 2rem;
            }
            .tp1-img-center {
                height: 280px;
            }
        }
        @media only screen and (min-height: 950px) {
            .tp1-img-center {
                width: 480px;
                height: 640px;
            }
        }
    </style>
{% endblock %}

{% block content %}
    <div class="tp1-wrapper">
        <table>
            <col width="10%">
            <col width="80%">
            <col width="10%">
            <tbody>
            <tr>
                <td></td>
                <td>
                    <div>
                        <div class="tp1-top-text">
                            <div class="ad-text-content tp1-top-text-title">{{ text_title }}</div>
                            <div class="ad-text-content tp1-top-text-content">{{ text_content }}</div>
                        </div>
                        <div class="tp1-img">
                            <img id="center_img" class="tp1-img-center" src="{{ center_img }}" onerror="this.onerror=null;this.src='http://7xias2.com1.z0.glb.clouddn.com/default_480X640.jpg'" />
                            <div class="tp1-button-wrapper">
                                <button class="tp1-down-button" ad-hot="{{ ad_id_1 }}" ad-hot-action-type="{{ hot_action_type }}" ad-hot-action-param='{{ hot_action_param }}'>{{ button_text | default:"click down" }}</button>
                            </div>
                        </div>
                    </div>
                </td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        var night = {% if night %} true {% else %} false {%  endif %};
        var oldOnLoad = window.onload || function () {};
        window.onload = function () {
            try {
                var titleColor = getClientTitleTextColor();
                var normalColor = getClientNormalTextColor();
                if (titleColor != null) {
                    var title_dom = document.getElementsByClassName('tp1-top-text-title')[0];
                    title_dom.style.color = titleColor;
                    title_dom.style.borderBotton = '1px solid '+ titleColor;
                }
                if (normalColor != null) {
                    var text_dom = document.getElementsByClassName('tp1-top-text-content')[0];
                    text_dom.style.color = normalColor;
                }
            } catch(err) {
                console.log(err);
            }

            oldOnLoad();
        }
    </script>
{% endblock %}
